<template>
  <el-dialog :title="title" :visible.sync="openDistribution" width="500px" append-to-body>
    <el-form class="dialog-form" label-suffix="：" ref="form" :model="form" :rules="rules" label-width="120px"
             :style="{'--form-item-width': '100%'}"
    >
      <el-form-item label="分配类型" prop="type">
        <el-select v-model="form.type" placeholder="分配类型" clearable size="small" @change="triggerDisCustomer">
          <el-option
            v-for="dict in allotTypeList"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="分配用户" prop="userId" v-if="customerUserAllot">
        <el-select v-model="form.userId" placeholder="选择用户信息" clearable size="small">
          <el-option
            v-for="dict in $parent.userList"
            :key="dict.userId"
            :label="dict.nickName + '（' + dict.deptName + '）'"
            :value="dict.userId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="分配部门" prop="deptId" v-if="customerDeptAllot">
        <el-select v-model="form.deptId" placeholder="选择部门信息" clearable size="small">
          <el-option
            v-for="dict in $parent.deptList"
            :key="dict.deptId"
            :label="dict.deptName"
            :value="dict.deptId"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancel">取 消</el-button>
      <el-button size="small" type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {allotCustomerToUser, allotCustomerToDept} from "@/api/customerPool/customerPool"

export default {
  name: 'BathDisCustomer',
  data() {
    return {
      loading: false,
      allotTypeList: [
        {value: 1, label: "下级客户池"},
        {value: 2, label: "指定客户"}
      ],
      ids: [],
      // 弹出层标题
      title: '分配客户',
      // 是否显示弹出层
      openDistribution: false,
      customerUserAllot: false,
      customerDeptAllot: false,
      type: "",
      // 表单参数
      form: {
        type: undefined,
        userId: undefined,
        deptId: undefined
      },
      userList: [],
      // 表单校验
      rules: {
        type: [
          {required: true, message: '分配类型不能为空', trigger: 'change'}
        ],
        userId: [
          {required: true, message: '用户不能为空', trigger: 'change'}
        ],
        deptId: [
          {required: true, message: '部门不能为空', trigger: 'change'}
        ],
      }
    }
  },
  methods: {
    /** 触发分配人员 */
    triggerDisCustomer() {
      const type = this.form.type;
      // 分配客户
      if (type == 2) {
        this.customerUserAllot = true;
        this.customerDeptAllot = false
      } else {
        this.customerUserAllot = false;
        this.customerDeptAllot = true;
      }
      this.form.deptId = '';
      this.form.userId = '';
    },
    /** 打开弹窗 */
    openDialog(ids) {
      this.ids = ids;
      this.userList = this.$parent.userList;
      this.openDistribution = true
      this.customerUserAllot = false;
      this.customerDeptAllot = false
      this.resetForm('form')
    },
    /** 取消按钮 */
    cancel() {
      this.openDistribution = false
    },
    /** 确定按钮 */
    submitForm() {
      this.type = this.form.type;
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.$modal.loading("正在加载处理数据，请稍候！");
          // 分配给部门
          if (this.type == "1") {
            const data = {
              customerIds: this.ids,
              deptId: this.form.deptId
            }
            allotCustomerToDept(data).then(resp => {
              this.$modal.msgSuccess("分配成功");
              this.$modal.closeLoading();
              this.openDistribution = false
              if (this.$parent.getList) {
                this.$parent.getList();
              }
            })
          } else {
            const obj = this.userList.find(it => it.userId === this.form.userId);
            const data = {
              ...obj,
              customerIds: this.ids,
              userId: this.form.userId
            }
            allotCustomerToUser(data).then(resp => {
              this.$modal.msgSuccess("分配成功");
              this.$modal.closeLoading();
              this.openDistribution = false
              if (this.$parent.getList) {
                this.$parent.getList();
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
